<template>
  <div class="date-range-box">
    <el-date-picker
      v-model="dateArr"
      popper-class="date-range-box-picker"
      type="daterange"
      align="left"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      size="mini"
      :picker-options="pickerOptions2"
      @change="handleDateChange">
    </el-date-picker>
  </div>
</template>
<script>
  // import { formatTransDate } from '../../assets/js/index'
  import Msg from '../../assets/js/msg'
  export default {
    name: 'RangeDatePicker',
    props: {
      defaultDate: {
        type: Array,
        default: () => []
      }
    },
    data () {
      return {
        pickerOptions2: {
          disabledDate (time) {
            return time.getTime() > Date.now()
          },
          shortcuts: [
            {
              text: '昨日',
              onClick (picker) {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 1)
                end.setTime(end.getTime() - 3600 * 1000 * 24 * 1)
                picker.$emit('pick', [start, end])
              }
            },
            {
              text: '今日',
              onClick (picker) {
                const end = new Date()
                const start = new Date()
                picker.$emit('pick', [start, end])
              }
            },
            {
              text: '上周',
              onClick (picker) {
                const end = new Date()
                const start = new Date()
                const week = end.getDay()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * (6 + week))
                end.setTime(end.getTime() - 3600 * 1000 * 24 * week)
                picker.$emit('pick', [start, end])
              }
            },
            {
              text: '本周',
              onClick (picker) {
                const end = new Date()
                const start = new Date()
                const week = end.getDay()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * (week - 1))
                picker.$emit('pick', [start, end])
              }
            },
            {
              text: '上月',
              onClick (picker) {
                const end = new Date()
                const start = new Date()
                const year = start.getFullYear()
                const month = start.getMonth()
                const tDays = start.getDate()
                start.setTime(new Date(year, month - 1, 1).getTime())
                end.setTime(end.getTime() - 3600 * 1000 * 24 * tDays)
                picker.$emit('pick', [start, end])
              }
            },
            {
              text: '本月',
              onClick (picker) {
                const end = new Date()
                const start = new Date()
                const tDays = start.getDate()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * (tDays - 1))
                picker.$emit('pick', [start, end])
              }
            },
            {
              text: '过去7天',
              onClick (picker) {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
                end.setTime(end.getTime() - 3600 * 1000 * 24 * 1)
                picker.$emit('pick', [start, end])
              }
            },
            {
              text: '过去30天',
              onClick (picker) {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
                end.setTime(end.getTime() - 3600 * 1000 * 24 * 1)
                picker.$emit('pick', [start, end])
              }
            }
          ]
        },
        dateArr: []
      }
    },
    watch: {
      defaultDate: {
        handler (newValue) {
          if (newValue.length > 0 && newValue !== 'undefined') {
            newValue.forEach((item, index) => {
              // this.dateArr.splice(index, 1, formatTransDate(item))
              this.dateArr.splice(index, 1, item)
            })
          }
        },
        deep: true
      }
    },
    methods: {
      handleDateChange (arr) {
        if (arr === null) {
          this.$emit('date-change', [])
          return
        }
        let timeValue = new Date(arr[1]).getTime() - new Date(arr[0]).getTime()
        let day = timeValue / 1000 / 60 / 60 / 24 + 1
        if (day > 31) {
          Msg.alert('选择天数不能大于31天')
          this.dateArr = [new Date(), new Date()]
        } else {
          arr.forEach((item, index) => {
            this.dateArr.splice(index, 1, item)
          })
          this.$emit('date-change', arr)
        }
      }
    },
    created () {
      if (this.defaultDate.length > 0) {
        this.defaultDate.forEach((item, index) => {
          // this.dateArr.push(formatTransDate(item))
          this.dateArr.push(item)
        })
      }
    }
  }
</script>
<style lang="stylus">
  .date-range-box
    display inline-block
  .date-range-box-picker.date-range-box-picker.has-sidebar
    width 856px
  .date-range-box-picker
    .el-picker-panel__body
      min-width 603px
    .el-picker-panel [slot=sidebar]+.el-picker-panel__body,
    .el-picker-panel__sidebar+.el-picker-panel__body
      margin-left 200px
    .el-picker-panel [slot=sidebar],
    .el-picker-panel__sidebar
      width 200px
      .el-picker-panel [slot=sidebar], .el-picker-panel__sidebar
        padding 20px 15px
      .el-picker-panel__shortcut
        float left
        width 50%
        height 42px
        line-height 32px
        color #016DFB
        padding 0
        text-align center
        background #f6f6f6
        border 5px solid #ffffff
        transition color .3s linear, background-color .3s linear
        &:nth-last-child(-n+2)
          width 100%
        &:hover
          color #ffffff
          background #016DFB
</style>
